<template>
    <div id="exchange-record">
      <!-- navbar -->
      <van-nav-bar @click-left="back" class="navbar">
        <template #left>
          <van-icon name="arrow-left" size="18" color="#f7f8fa" />
        </template>
        <template #title>
          <span class="title-text">兑换记录</span>
        </template>
      </van-nav-bar>

      <!-- 列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="list"
      >
        <van-cell
          v-for="item in list"
          :key="item.title"
          :title="item.title"
          :label="item.createTime"
          :value="item.num"
          center
        />
      </van-list>
    </div>
</template>

<script>
  import store from '@/store'

  export default {
    name: "ExchangeCandyRecord",
    data() {
      return {
        store: store,
        list: [{title: '糖果兑换', num: 23.3, createTime: '2020-08-31 11:00:00'}],
        loading: false,
        finished: false,
      };
    },
    methods: {
      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          for (let i = 0; i < 5; i++) {
            this.list.push({title: 'GST兑换', num: 23.3, createTime: '2020-08-31 11:00:00'});
          }

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 10) {
            this.finished = true;
          }
        }, 10);
      },
      back() {
        store.state.exchangeCandy.showPopup = false;
        this.$router.back(-1);
      },
    },
    mounted: function() {

    },
    destroyed: function () {
      // 处理页面按回退键时页面空白的问题
      store.state.exchangeCandy.showPopup = false;
    },
  }
</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }
  .title-text {
    color: #f7f8fa;
    font-size: 14px;
  }
  .list {
    position: fixed;
    top: 46px;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
  }
</style>
